<template>
  <div class="formList">
    <el-form 
      ref="form"
      :model="formParams"
      :size="options.size || 'small'"
      v-bind="options" 
    >
      <el-form-item 
        v-for="item in options.columns"
        v-if="item.show != false"
        :key="item.prop" 
        v-bind="item" 
      >
        <template v-if="item.type === 'radio'">
          <el-radio-group 
            v-model="formParams[item.prop]" 
            v-bind="item" 
            v-on="item"
          >
            <el-radio 
              v-for="o in item.options"
              :key="o.value"
              :label="item.optionsProps ? o[item.optionsProps.value] : o.value">
              {{ item.optionsProps ? o[item.optionsProps.label] : o.label }}
            </el-radio>
          </el-radio-group>
        </template>
        <template v-else-if="item.type === 'checkbox'">
          <el-checkbox-group  
            v-model="formParams[item.prop]" 
            v-bind="item" 
            v-on="item"
          >
            <el-checkbox 
              v-for="o in item.options"
              :key="o.value"
              :label="item.optionsProps ? o[item.optionsProps.value] : o.value">
              {{ item.optionsProps ? o[item.optionsProps.label] : o.label }}
            </el-checkbox>
          </el-checkbox-group>
        </template>
        <template v-else-if="item.type === 'text' || item.type === 'textarea'">
          <el-input 
            :placeholder="item.placeholder || '请输入'"
            :clearable="item.clearable === false ? false : true"
            v-model="formParams[item.prop]" 
            v-bind="item" 
            v-on="item" 
          />
        </template>
        <template v-else-if="item.type === 'select'">
          <el-select 
            :placeholder="item.placeholder || '请选择'" 
            :clearable="item.clearable === false ? false : true"
            v-model="formParams[item.prop]" 
            v-bind="item" 
            v-on="item"
          >
            <el-option 
              v-for="o in item.options"
              :key="o.value"
              :label="item.optionsProps ? o[item.optionsProps.label] : o.label"
              :value="item.optionsProps ? o[item.optionsProps.value] : o.value">
            </el-option>
          </el-select>
        </template>
        <template v-else-if="item.type === 'switch'">
          <el-switch 
            v-model="formParams[item.prop]" 
            v-bind="item" 
            v-on="item" 
          />
        </template>
        <template v-else-if="item.type === 'date'">
          <el-date-picker 
            :placeholder="item.placeholder || '请选择'" 
            :start-placeholder="item.startPlaceholder || '开始日期'"
            :end-placeholder="item.endPlaceholder || '结束日期'" 
            :type="item.typeDate"
            :format="item.format || 'yyyy-MM-dd'" 
            :value-format="item.valueFormat || 'yyyy-MM-dd'"  
            :clearable="item.clearable === false ? false : true"
            v-model="formParams[item.prop]" 
            v-bind="item" 
            v-on="item" 
          />
        </template>
        <template v-else-if="item.type === 'tree'">
          <treeselect 
            :placeholder="item.placeholder || '请选择'" 
            :noOptionsText="item.noOptionsText || '暂无数据'" 
            :noChildrenText="item.noChildrenText || '暂无数据'" 
            :loadingText="item.loadingText || '数据加载中'"
            v-model="formParams[item.prop]" 
            v-bind="item" 
            v-on="item" 
          />
        </template>
        <template v-else-if="item.slots">
          <slot :name="item.prop" :row="item"></slot>
        </template>
      </el-form-item>
      <el-form-item v-if="options.isSubmit != false">
        <el-button size="mini" type="primary" icon="el-icon-search" @click="onSerch">查询</el-button>
        <el-button size="mini" icon="el-icon-refresh" @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect"
import "@riophae/vue-treeselect/dist/vue-treeselect.css"
export default {
  name: "FormList",
  components: { 
    Treeselect
  },
  props: ['formParams', 'options', 'visible'],
  data() {
    return {
    };
  },
  watch: {
    'visible':{
      handler(newval, old) {
        if(!newval){
          this.resetForm('form')
        }
      }
    }
  },
  methods: {
    onValidate(){
      let isCheck
      this.$refs['form'].validate(valid => {
        isCheck = valid
      })
      return isCheck
    },
    onSerch() {
      if(this.onValidate()){
        this.$emit('serch')
      }
    },
    onReset(){
      this.resetForm('form')
      this.$emit('reset')
    }
  },
};
</script>

<style scoped lang="scss">
.formList{
  margin-top: -15px;
  .el-form-item{
    margin-top: 15px;
    margin-bottom: 0;
  }
  .el-select,
  .el-date-editor{
    width: 100%;
  }
  .el-input,
  .el-textarea,
  .el-select,
  .el-date-editor,
  .vue-treeselect{
    max-width: 400px;
  }
  .el-form--inline{
    .el-input,
    .el-textarea,
    .el-select,
    .el-date-editor{
      width: 200px;
    }
    .el-range-editor,
    .vue-treeselect{
      width: 280px;
    }
  }
  ::v-deep{
    .el-form-item__label{
      padding: 0;
    }
    .vue-treeselect__control{
      height: 30px;
    }
    .vue-treeselect__placeholder, .vue-treeselect__single-value{
      line-height: inherit;
    }
    .vue-treeselect__multi-value{
      display: block;
    }
    .vue-treeselect__multi-value-item-container{
      padding-top: 0;
    }
    .vue-treeselect--has-value .vue-treeselect__multi-value{
      margin-bottom: 0;
    }
    .vue-treeselect--searchable.vue-treeselect--multi.vue-treeselect--has-value .vue-treeselect__input-container{
      padding-top: 0;
    }
    .vue-treeselect__multi-value-item{
      padding: 0;
      border: none;
    }
    .vue-treeselect--multi .vue-treeselect__input{
      padding: 0;
    }

    .vue-treeselect__limit-tip{
      padding-top: 0;
    }
    .vue-treeselect__limit-tip-text{
      padding: 0;
      margin: 0;
    }
  }
}
</style>